<template>
  <div class="faith_groups_show">
    <NavbarFaithGroups></NavbarFaithGroups>
    <div class="container">
      <router-link
        target="_blank"
        v-for="item in list"
        :key="item.id"
        :to="'/show/'+ item.id"
        :title="item.title"
      >
        <div class="text-left py-2 border-bottom">
          <h5 class="mt-0 text-dark">{{item.title}}</h5>
          <div class="d-flex">
            <img
              class="mr-2"
              v-lazy="domain+item.thumb"
              :alt="item.title"
              v-if="item.thumb"
              :key="item.thumb"
            />
            <div>
              <small class="text-muted">{{item.create_time*1000 | formatDate}}</small>
              <p
                class="text-truncate-3 mb-0 text-muted"
                v-html="item.description"
              ></p>
            </div>

          </div>

        </div>
      </router-link>
      <div class="text-center my-5">
        <div
          v-if="isload"
          class="btn btn-primary"
          @click="loadMore()"
        >加载更多</div>
        <div v-else>
          我是有底线的…………
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import NavbarFaithGroups from "@/components/NavbarFaithGroups.vue";
import { formatDate } from '../util/date.js';

export default {
  name: "faith_groups_list",
  components: {
    NavbarFaithGroups
  },
  data () {
    return {
      domain: process.env.VUE_APP_baseURL,
      list: "",
      page: 2,
      isload: true
    };
  },
  created () {
    this.getList();
  },
  watch: {
    $route (to, form) {
      this.getList();
    }
  },
  methods: {
    //获取详情页内容
    getList () {
      let _this = this;
      _this.axios
        .post("/content/news/getList", {
          cat_id: _this.$route.params.id,
          page: 1,
          limit: 10
        })
        .then(function (ret) {
          console.log(ret);
          if (ret.data.length < 10) {
            _this.isload = false;
          }
          _this.list = ret.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    loadMore () {
      let _this = this;
      _this.axios
        .post("/content/news/getList", {
          cat_id: _this.$route.params.id,
          page: _this.page,
          limit: 10
        })
        .then(function (ret) {
          _this.page++;
          for (let i = 0; i < ret.data.length; i++) {
            if (ret.data.length < 10) {
              _this.isload = false;
            }
            _this.list.push(ret.data[i]);
            console.log(_this.page);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  },
  filters: {
    formatDate (time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss');  //显示到日 'yyyy-MM-dd hh:mm' //全部显示
    },
    formatTime (time) {
      var date = new Date(time);
      return formatDate(date, 'hh:mm');    //显示到小时
    },
  },
};
</script>

<style>
.faith_groups_show img {
  width: 160px;
  height: 90px;
}
</style>

